<template>
	<view class="experienceItem_style">
		<!-- 标题 -->
		<view class="experienceItem_title">{{item.title}}</view>

		<!-- tag和日期 -->
		<view class="experienceItem_nav">
			<view class="experienceItem_tag">
				<ItemTag v-show="item.tags && item.tags.length > 0" v-for="data in item.tags" :item="data"
					:isGray="true" />
			</view>
			<view class="experienceItem_date">
				<text>阅读: {{item.count}}</text> <text style="margin-left: 20rpx;">{{item.date}}</text>
			</view>
		</view>

		<!-- 文章简介 -->
		<view class="experienceItem_desc">
			{{item.desc}}
		</view>

		<!-- 图片 -->
		<view class="experienceItem_image">
			<image v-for="src in item.images" :src="src" mode=""></image>
		</view>
	</view>
</template>

<script>
	import ItemTag from '@/components/ItemTag.vue'
	export default {
		components: {
			ItemTag
		},
		name: "ExperienceItem",
		props: ["item"],
		data() {
			return {

			};
		}
	}
</script>

<style>
	.experienceItem_style {
		width: 100%;
		margin: 20rpx 0 100rpx;
	}
	
	.experienceItem_title {
		width: 100%;
	}
	
	.experienceItem_nav {
		margin-top: 30rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		height: 50rpx;
	}

	.experienceItem_tag {
		display: flex;
		height: 100%;
	}

	.experienceItem_image {
		margin-top: 20rpx;
		display: flex;
		flex-wrap: nowrap;
		width: 100%;
		justify-content: space-between;
		justify-content: flex-start;
		height: 260rpx;

	}

	.experienceItem_image>image {
		box-sizing: border-box;
		margin: 0 10rpx;
		width: 100%;
		max-width: 50%;
		height: 100%;
		min-height: 35%;
		max-height: 100%;
	}

	.experienceItem_date {
		font-size: 12px;
		line-height: 50rpx;
		color: #8f9199;
	}

	.experienceItem_desc {
		margin-top: 30rpx;
		color: #8f9199;
		font-size: 14px;
	}
</style>
